import { useState, memo, useMemo } from "react" // 新增 useMemo
import { useModalSlideUp } from "@/features/useModal"
import styled from "@emotion/styled"
import ButtonRegular from "@/components/composite/ButtonRegular/main"
import Svg from "@/components/base/Svg"

const Container = styled.div`
    display: flex;
    flex-direction: column;
    background-color: #f5f5f5;
    padding: 16rem;
    border-top-left-radius: 12rem;
    border-top-right-radius: 12rem;
`
const SelectButton = styled.div`
    height: 48rem;
    background-color: #ffffff;
    border-radius: 8rem;
    text-align: center;
    line-height: 48rem;
    margin-top: 8rem;
    font-family: "Gilroy";
    font-size: 16rem;
    color: #ff1f57;
    cursor: pointer;
    transition: opacity 0.2s ease;

    &:active {
        opacity: 0.8;
    }

    &.white {
        background-color: #f5f5f5;
        color: #69728c;
    }
`

const HintContainer = styled.div`
    background-color: transparent;
    padding: 16rem;
    border-top-left-radius: 12rem;
    border-top-right-radius: 12rem;
`
const HintContainerContent = styled.div`
    height: 308rem;
    margin-bottom: 38rem;
    background: linear-gradient(180deg, #ffcce1 0%, #f2f2f5 25%);
    border-radius: 12rem;
    padding: 24rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;

    & > svg {
        width: 80rem;
        height: 80rem;
    }

    & > h3 {
        margin: 16rem 0 8rem;
        font-size: 18rem;
        font-weight: 600;
        color: #1d2129;
    }

    & > p {
        margin: 0;
        font-size: 14rem;
        line-height: 1.5;
        color: #4e5969;
    }
`

const BottomBlock = styled.div`
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 24rem;
`
const CancelButton = styled(ButtonRegular)`
    flex: 1;
    height: 40rem;
    line-height: 40rem;
    font-weight: 500;
    font-size: 16rem;
    text-align: center;
    font-family: "Gilroy";
    box-shadow: none;
    color: #ff3568;
    background: linear-gradient(90deg, #ffffff 0%, #ffffff 100%);
`
const SubmitButton = styled(ButtonRegular)`
    flex: 1;
    height: 40rem;
    line-height: 40rem;
    font-weight: 500;
    font-size: 16rem;
    text-align: center;
    font-family: "Gilroy";
    box-shadow: none;
    margin-left: 8rem;
`

// 定义视图配置接口
interface ViewConfig {
    title?: string
    message: string
    confirmText?: string
    cancelText?: string
    showConfirmButton?: boolean
    onConfirmAction: () => void
    onCancelAction: () => void
    isSelectView?: boolean // 标记是否为选择视图
}

// 定义所有可能的视图状态及其配置
const viewConfigurations = (
    closeModal: () => void,
    setCardType: (type: CardType) => void,
    onConfirm?: () => void,
    onCancel?: () => void,
): Record<CardType, ViewConfig> => ({
    delete: {
        isSelectView: true,
        message: "", // SelectView 不需要 message
        onConfirmAction: () => setCardType("hint"), // Delete 按钮触发
        onCancelAction: () => {
            // Cancel 按钮触发
            onCancel?.()
            closeModal()
        },
    },
    hint: {
        title: "Hint",
        message:
            "After the account is deleted, the transaction records of the account will not be deleted. Are you sure you want to delete the account?",
        confirmText: "Okay",
        cancelText: "Cancel",
        showConfirmButton: true,
        onConfirmAction: () => {
            onConfirm?.()
            closeModal()
        },
        onCancelAction: () => setCardType("delete"), // 返回选择视图
    },
    limit: {
        title: "Hint",
        message:
            "The number of withdrawal accounts you can add exceeds the maximum limit. You must delete some withdrawal accounts before adding new accounts.",
        cancelText: "Okay", // 只有一个按钮，表现为取消操作
        showConfirmButton: false, // 不显示确认按钮
        onConfirmAction: () => {}, // 无确认操作
        onCancelAction: () => {
            // Okay 按钮触发
            onCancel?.() // 可能需要执行外部传入的取消逻辑
            closeModal()
        },
    },
})

type CardType = "delete" | "hint" | "limit"
interface IProps {
    type?: CardType
    onConfirm?: () => void // 删除确认回调
    onCancel?: () => void // 取消操作回调
}

const ConfirmModal = ({ type = "delete", onConfirm, onCancel }: IProps) => {
    const { close: closeModal } = useModalSlideUp("account-page")
    const [cardType, setCardType] = useState<CardType>(type)

    // 使用 useMemo 生成配置，避免在每次渲染时重新计算
    const configs = useMemo(
        () => viewConfigurations(closeModal, setCardType, onConfirm, onCancel),
        [closeModal, onConfirm, onCancel], // 依赖项
    )

    const currentConfig = configs[cardType]

    // 根据配置渲染视图
    if (currentConfig.isSelectView) {
        return (
            <Container>
                {/* Delete 按钮 */}
                <SelectButton onClick={currentConfig.onConfirmAction}>Delete</SelectButton>
                {/* Cancel 按钮 */}
                <SelectButton
                    className="white"
                    onClick={currentConfig.onCancelAction}
                >
                    Cancel
                </SelectButton>
            </Container>
        )
    } else {
        // 渲染提示视图
        return (
            <HintContainer>
                <HintContainerContent>
                    <Svg src="pages/WithdrawAccounts/hint.svg" />
                    {currentConfig.title && <h3>{currentConfig.title}</h3>}
                    <p>{currentConfig.message}</p>
                    <BottomBlock>
                        {/* Cancel/Okay 按钮 */}
                        <CancelButton
                            variant={{
                                type: "solid",
                                backgroundColorLeft: "#fff",
                                backgroundColorRight: "#fff",
                            }}
                            onClick={currentConfig.onCancelAction}
                        >
                            {currentConfig.cancelText || "Cancel"}
                        </CancelButton>
                        {/* Confirm/Okay 按钮 */}
                        {currentConfig.showConfirmButton && (
                            <SubmitButton onClick={currentConfig.onConfirmAction}>
                                {currentConfig.confirmText || "Okay"}
                            </SubmitButton>
                        )}
                    </BottomBlock>
                </HintContainerContent>
            </HintContainer>
        )
    }
}

export default memo(ConfirmModal)
